@import './common';

// ***** button variable *****
// 按钮样式
@btn-color       : rgba(43, 44, 45, 1);
@btn-height      : 34px;
@btn-border      : 1px solid rgba(53, 81, 89, 1);
@primary-color   : rgba(148, 240, 251, 1);
@secondary-color : rgba(16, 30, 50, 0.4);
@danger-color    : rgba(243, 115, 112, 1);
@disabled-color  : #01122a;

// ***** button mixin *****

// 按钮公共样式
.btn-common(@bg, @border, @color) {
  font-size: 16px;
  border-radius   : 6px;
  line-height     : calc(@btn-height - 2px);
  // height       : @btn-height;
  background      : @bg;
  border          : 1px solid @border;
  font-weight     : bold;
  color           : @color;
  box-shadow: 2px 2px 4px 0px rgba(229, 252, 255, 0.2), 2px 2px 2px 0px rgba(229, 252, 255, 0.5), -2px -2px 2px 0px rgba(0, 0, 0, 0.2);
  &[disabled] {
    box-shadow: none !important;
    opacity   : 0.2;
  }
}

// 前台按钮
.btn-primary-f {
  .btn-common(@primary-color, #64E3C5, @btn-color);

  &:hover,
  &:active {
    box-shadow: 0px 0px 10px 0px rgba(133, 247, 220, 0.5), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  }

  &[disabled] {
    background: #85F7DC;
    border    : 1px solid #64E3C5;
  }
}

.btn-secondary-f {
  .btn-common(rgba(153, 255, 231, 0.1), #64E3C5, #85F7DC);

  &:hover,
  &:active {
    box-shadow: 0px 0px 10px 0px rgba(133, 247, 220, 0.5), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  }

  &[disabled] {
    background: rgba(153, 255, 231, 0.1);
  }

}


.btn-danger-f {
  .btn-common(#FF8F60, #FA895A, #2B2C2D);

  &:hover,
  &:active {
    box-shadow: 0px 0px 10px 0px #FF8F60, 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  }

  &[disabled] {}
}

.btn-dialog-f {
  color: @text-color;
  background: linear-gradient(0deg,
      rgba(11, 28, 51, 1),
      rgba(13, 33, 59, 1));
  border: 1px solid rgba(51, 81, 95, 1);
}